<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>
        权限规则
    </title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <script type="text/javascript" th:src="@{/lib/loading/okLoading.js}"></script>
    <link rel="stylesheet" th:href="@{/css/main.css}" media="all">
    <link rel="stylesheet" th:href="@{/css/bootstrap.css}">
    <!--导入ElementUI样式列表，css样式一般都在页面头部-->
    <link rel="stylesheet" th:href="@{/css/index.css}">
</head>
<style>
    .demo-table-expand {
        font-size: 0;
    }

    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }

    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }
</style>
<body>
<div class="x-nav">
            <span class="layui-breadcrumb">
              <a><cite>首页</cite></a>
              <a><cite>系统管理</cite></a>
              <a><cite>菜单管理</cite></a>
            </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       href="javascript:location.replace(location.href);" title="刷新"><i class="layui-icon"
                                                                        style="line-height:30px">ဂ</i></a>
</div>
<div class="x-body" id="app">
    <el-col :span="24">
        <div class="grid-content bg-purple-dark"></div>
    </el-col>
    <el-button type="success" icon="el-icon-plus" size="mini" @click="add()">添 加</el-button>
    <el-table
            :data="sysMenuList"
            style="width: 100%;margin-bottom: 20px;margin-top: 10px;"
            row-key="id"
            border
            :default-expand-all="false"
            :tree-props="{children: 'children'}">

        <el-table-column prop="rightText" sortable label="菜单名称" width="250">

        </el-table-column>
        <el-table-column label="图标" align="center">
            <template slot-scope="scope">
                <i :class="scope.row.icon"></i>
            </template>
        </el-table-column>
        <el-table-column prop="rightType" label="权限标识" width="150" align="center">
        </el-table-column>
        <el-table-column prop="rightUrl" label="模块路径" width="250" align="center">
        </el-table-column>
        <el-table-column prop="rightTip" label="模块Tip" width="160" align="center"></el-table-column>
        <el-table-column prop="sortValue" label="排序" width="60" align="center"></el-table-column>
        <el-table-column label="状态" width="80">
            <template slot-scope="scope">
                <el-switch
                        v-model="scope.row.status === 1"
                        @change="switchStatus(scope.row)">
                </el-switch>
            </template>
        </el-table-column>
        <el-table-column label="操作" width="200" align="center">
            <template slot-scope="scope">
                <el-button type="success" v-if="scope.row.rightType !== 'Url'" icon="el-icon-plus" size="mini"
                           @click="add(scope.row)" title="添加下级节点"></el-button>
                <el-button type="primary" icon="el-icon-edit" size="mini" @click="edit(scope.row)"
                           title="修改"></el-button>
                <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeDataById(scope.row.rightCode)"
                           title="删除" :disabled="scope.row.children.length > 0"></el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="40%">
        <el-form ref="dataForm" :model="sysMenus" label-width="150px" size="small" style="padding-right: 40px;">
            <el-form-item label="上级部门" v-if="sysMenus.id === ''">
                <el-input v-model="sysMenus.parentName" disabled="disabled"/>
            </el-form-item>
            <el-form-item label="菜单类型" prop="type">
                <el-radio-group v-model="sysMenus.rightType" :disabled="typeDisabled">
                    <el-radio :label="'Folder'" :disabled="type0Disabled">目录</el-radio>
                    <el-radio :label="'Document'" :disabled="type1Disabled">菜单</el-radio>
                    <el-radio :label="'Url'" :disabled="type2Disabled">按钮</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="菜单名称" prop="name">
                <el-input v-model="sysMenus.rightText"/>
            </el-form-item>
            <el-form-item label="权限主键" prop="rightCode"
                          v-if="sysMenus.rightType == 'Folder' || sysMenus.rightType == 'Document'">
                <el-input v-model="sysMenus.rightCode"/>
            </el-form-item>
            <!--            <el-form-item label="权限主键" prop="rightCode" v-if="sysMenus.rightType == 'Document'">-->
            <!--                <el-input v-model="sysMenus.rightCode"/>-->
            <!--            </el-form-item>-->
            <el-form-item label="权限主键父" prop="rightCode" v-if="sysMenus.rightType == 'Document'">
                <el-input v-model="sysMenus.rightParentCode" disabled/>
            </el-form-item>

            <el-form-item label="权限主键" prop="rightCode" v-if="sysMenus.rightType == 'Url'">
                <el-input v-model="sysMenus.rightCode"/>
            </el-form-item>
            <el-form-item label="权限主键父" prop="rightCode" v-if="sysMenus.rightType == 'Url'">
                <el-input v-model="sysMenus.rightParentCode" disabled/>
            </el-form-item>

            <el-form-item label="图标" prop="icon" v-if="sysMenus.rightType !== 'Url'">
                <el-select v-model="sysMenus.icon" clearable>
                    <el-option v-for="item in iconList" :key="item.class" :label="item.class" :value="item.class">
            <span style="float: left;">
             <i :class="item.class"></i>  <!-- 如果动态显示图标，这里添加判断 -->
            </span>
                        <span style="padding-left: 6px;">{{ item.class }}</span>
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="排序">
                <el-input-number v-model="sysMenus.sortValue" controls-position="right" :min="0"/>
            </el-form-item>
            <el-form-item prop="component" v-if="sysMenus.rightType !== 'Folder'">
              <span slot="label">
                <el-tooltip content="访问的组件路径，如：`system/user/index`，默认在`views`目录下" placement="top">
                <i class="el-icon-question"></i>
                </el-tooltip>
                模块路径
              </span>
                <el-input v-model="sysMenus.rightUrl" placeholder="请输入组件路径"/>
            </el-form-item>
            <el-form-item v-if="sysMenu.rightType === 'Url'">
                <el-input v-model="sysMenus.rightUrl" placeholder="请输入权限标识" maxlength="100"/>
                <span slot="label">
                <el-tooltip content="控制器中定义的权限字符，如：@PreAuthorize(hasAuthority('bnt.sysRole.list'))" placement="top">
                <i class="el-icon-question"></i>
                </el-tooltip>
                权限字符
              </span>
            </el-form-item>
            <el-form-item label="状态" prop="type">
                <el-radio-group v-model="sysMenus.status">
                    <el-radio :label="1">正常</el-radio>
                    <el-radio :label="0">停用</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="small" icon="el-icon-refresh-right">取 消</el-button>
        <el-button type="primary" icon="el-icon-check" @click="saveOrUpdate()" size="small">确 定</el-button>
      </span>
    </el-dialog>
    <el-divider></el-divider>
    <el-divider></el-divider>
    <el-divider></el-divider>
    <el-divider></el-divider>
</div>
</div>
<script th:src="@{/lib/layui/layui.js}" charset="utf-8"></script>
<!--js脚本一般是放在页面尾部-->
<!--Vue js脚本-->
<script th:src="@{/js/vue.js}" charset="utf-8"></script>
<!--引入ElementUI组件库-->
<script th:src="@{/js/index.js}" charset="utf-8"></script>
<!--引入Axios js脚本-->
<script th:src="@{/js/axios.js}" charset="utf-8"></script>
<!--引入时间插件包Momentjs-->
<script th:src="@{/js/moment.min.js}" charset="utf-8"></script>

<script>
    var app = new Vue({
        el: "#app",//声明当前Vue在页面的作用域
        data: {
            sysMenuList: [],
            expandKeys: [], // 需要自动展开的项

            typeDisabled: false,
            type0Disabled: false,
            type1Disabled: false,
            type2Disabled: false,
            dialogTitle: '',

            dialogVisible: false,
            sysMenu: {},
            sysMenus: {
                id: '',
                name: '',
                type: 0,
                rightType: '',
                rightText: '',
                path: '',
                rightUrl: '',
                perms: '',
                icon: '',
                sortValue: 1,
                status: 1
            },
            saveBtnDisabled: false,
            iconList: [
                {

                    class: "el-icon-delete",

                },

                {

                    class: "el-icon-delete-solid",

                },

                {

                    class: "el-icon-s-tools",

                },

                {

                    class: "el-icon-setting",

                },

                {

                    class: "el-icon-user-solid",

                },

                {

                    class: "el-icon-user",

                },

                {

                    class: "el-icon-phone",

                },

                {

                    class: "el-icon-phone-outline",

                },

                {

                    class: "el-icon-more",

                },

                {

                    class: "el-icon-more-outline",

                },

                {

                    class: "el-icon-star-on",

                },

                {

                    class: "el-icon-star-off",

                },

                {

                    class: "el-icon-s-goods",

                },

                {

                    class: "el-icon-goods",

                },

                {

                    class: "el-icon-warning",

                },

                {

                    class: "el-icon-warning-outline",

                },

                {

                    class: "el-icon-question",

                },

                {

                    class: "el-icon-info",

                },

                {

                    class: "el-icon-remove",

                },

                {

                    class: "el-icon-circle-plus",

                },

                {

                    class: "el-icon-success",

                },

                {

                    class: "el-icon-error",

                },

                {

                    class: "el-icon-zoom-in",

                },

                {

                    class: "el-icon-zoom-out",

                },

                {

                    class: "el-icon-remove-outline",

                },

                {

                    class: "el-icon-circle-plus-outline",

                },

                {

                    class: "el-icon-circle-check",

                },

                {

                    class: "el-icon-circle-close",

                },

                {

                    class: "el-icon-s-help",

                },

                {

                    class: "el-icon-help",

                },

                {

                    class: "el-icon-minus",

                },

                {

                    class: "el-icon-plus",

                },

                {

                    class: "el-icon-check",

                },

                {

                    class: "el-icon-close",

                },

                {

                    class: "el-icon-picture",

                },

                {

                    class: "el-icon-picture-outline",

                },

                {

                    class: "el-icon-picture-outline-round",

                },

                {

                    class: "el-icon-upload",

                },

                {

                    class: "el-icon-upload2",

                },

                {

                    class: "el-icon-download",

                },

                {

                    class: "el-icon-camera-solid",

                },

                {

                    class: "el-icon-camera",

                },

                {

                    class: "el-icon-video-camera-solid",

                },

                {

                    class: "el-icon-video-camera",

                },

                {

                    class: "el-icon-message-solid",

                },

                {

                    class: "el-icon-bell",

                },

                {

                    class: "el-icon-s-cooperation",

                },

                {

                    class: "el-icon-s-order",

                },

                {

                    class: "el-icon-s-platform",

                },

                {

                    class: "el-icon-s-fold",

                },

                {

                    class: "el-icon-s-unfold",

                },

                {

                    class: "el-icon-s-operation",

                },

                {

                    class: "el-icon-s-promotion",

                },

                {

                    class: "el-icon-s-home",

                },

                {

                    class: "el-icon-s-release",

                },

                {

                    class: "el-icon-s-ticket",

                },

                {

                    class: "el-icon-s-management",

                },

                {

                    class: "el-icon-s-open",

                },

                {

                    class: "el-icon-s-shop",

                },

                {

                    class: "el-icon-s-marketing",

                },

                {

                    class: "el-icon-s-flag",

                },

                {

                    class: "el-icon-s-comment",

                },

                {

                    class: "el-icon-s-finance",

                },

                {

                    class: "el-icon-s-claim",

                },

                {

                    class: "el-icon-s-custom",

                },

                {

                    class: "el-icon-s-opportunity",

                },

                {

                    class: "el-icon-s-data",

                },

                {

                    class: "el-icon-s-check",

                },

                {

                    class: "el-icon-s-grid",

                },

                {

                    class: "el-icon-menu",

                },

                {

                    class: "el-icon-share",

                },

                {

                    class: "el-icon-d-caret",

                },

                {

                    class: "el-icon-caret-left",

                },

                {

                    class: "el-icon-caret-right",

                },

                {

                    class: "el-icon-caret-bottom",

                },

                {

                    class: "el-icon-caret-top",

                },

                {

                    class: "el-icon-bottom-left",

                },

                {

                    class: "el-icon-bottom-right",

                },

                {

                    class: "el-icon-back",

                },

                {

                    class: "el-icon-right",

                },

                {

                    class: "el-icon-bottom",

                },

                {

                    class: "el-icon-top",

                },

                {

                    class: "el-icon-top-left",

                },

                {

                    class: "el-icon-top-right",

                },

                {

                    class: "el-icon-arrow-left",

                },

                {

                    class: "el-icon-arrow-right",

                },

                {

                    class: "el-icon-arrow-down",

                },

                {

                    class: "el-icon-arrow-up",

                },

                {

                    class: "el-icon-d-arrow-left",

                },

                {

                    class: "el-icon-d-arrow-right",

                },

                {

                    class: "el-icon-video-pause",

                },

                {

                    class: "el-icon-video-play",

                },

                {

                    class: "el-icon-refresh",

                },

                {

                    class: "el-icon-refresh-right",

                },

                {

                    class: "el-icon-rank",

                },

                {

                    class: "el-icon-date",

                },

                {

                    class: "el-icon-edit-outline",

                },

                {

                    class: "el-icon-s-flag",

                },

                {

                    class: "el-icon-folder",

                },

                {

                    class: "el-icon-folder-opened",

                },

                {

                    class: "el-icon-folder-remove",

                },

                {

                    class: "el-icon-folder-delete",

                },

                {

                    class: "el-icon-folder-checked",

                },

                {

                    class: "el-icon-tickets",

                },

                {

                    class: "el-icon-document-remove",

                },

                {

                    class: "el-icon-document-delete",

                },

                {

                    class: "el-icon-document-copy",

                },

                {

                    class: "el-icon-document-checked",

                },

                {

                    class: "el-icon-document",

                },

                {

                    class: "el-icon-document-add",

                },

                {

                    class: "el-icon-printer",

                },

                {

                    class: "el-icon-paperclip",

                },

                {

                    class: "el-icon-takeaway-box",

                },

                {

                    class: "el-icon-search",

                },

                {

                    class: "el-icon-monitor",

                },

                {

                    class: "el-icon-attract",

                },

                {

                    class: "el-icon-mobile",

                },

                {

                    class: "el-icon-scissors",

                },

                {

                    class: "el-icon-umbrella",

                },

                {

                    class: "el-icon-headset",

                },

                {

                    class: "el-icon-brush",

                },

                {

                    class: "el-icon-mouse",

                },

                {

                    class: "el-icon-coordinate",

                },

                {

                    class: "el-icon-magic-stick",

                },

                {

                    class: "el-icon-reading",

                },

                {

                    class: "el-icon-data-line",

                },

                {

                    class: "el-icon-data-board",

                },

                {

                    class: "el-icon-pie-chart",

                },

                {

                    class: "el-icon-data-analysis",

                },

                {

                    class: "el-icon-collection-tag",

                },

                {

                    class: "el-icon-film",

                },

                {

                    class: "el-icon-suitcase",

                },

                {

                    class: "el-icon-suitcase-1",

                },

                {

                    class: "el-icon-receiving",

                },

                {

                    class: "el-icon-collection",

                },

                {

                    class: "el-icon-files",

                },

                {

                    class: "el-icon-notebook-1",

                },

                {

                    class: "el-icon-notebook-2",

                },

                {

                    class: "el-icon-toilet-paper",

                },

                {

                    class: "el-icon-office-building",

                },

                {

                    class: "el-icon-school",

                },

                {

                    class: "el-icon-table-lamp",

                },

                {

                    class: "el-icon-house",

                },

                {

                    class: "el-icon-no-smoking",

                },

                {

                    class: "el-icon-smoking",

                },

                {

                    class: "el-icon-shopping-cart-full",

                },

                {

                    class: "el-icon-shopping-cart-1",

                },

                {

                    class: "el-icon-shopping-cart-2",

                },

                {

                    class: "el-icon-shopping-bag-1",

                },

                {

                    class: "el-icon-shopping-bag-2",

                },

                {

                    class: "el-icon-sold-out",

                },

                {

                    class: "el-icon-sell",

                },

                {

                    class: "el-icon-present",

                },

                {

                    class: "el-icon-box",

                },

                {

                    class: "el-icon-bank-card",

                },

                {

                    class: "el-icon-money",

                },

                {

                    class: "el-icon-coin",

                },

                {

                    class: "el-icon-wallet",

                },

                {

                    class: "el-icon-discount",

                },

                {

                    class: "el-icon-price-tag",

                },

                {

                    class: "el-icon-news",

                },

                {

                    class: "el-icon-guide",

                },

                {

                    class: "el-icon-male",

                },

                {

                    class: "el-icon-female",

                },

                {

                    class: "el-icon-thumb",

                },

                {

                    class: "el-icon-cpu",

                },

                {

                    class: "el-icon-link",

                },

                {

                    class: "el-icon-connection",

                },

                {

                    class: "el-icon-open",

                },

                {

                    class: "el-icon-turn-off",

                },

                {

                    class: "el-icon-set-up",

                },

                {

                    class: "el-icon-chat-round",

                },

                {

                    class: "el-icon-chat-line-round",

                },

                {

                    class: "el-icon-chat-square",

                },

                {

                    class: "el-icon-chat-dot-round",

                },

                {

                    class: "el-icon-chat-dot-square",

                },

                {

                    class: "el-icon-chat-line-square",

                },

                {

                    class: "el-icon-message",

                },

                {

                    class: "el-icon-postcard",

                },

                {

                    class: "el-icon-position",

                },

                {

                    class: "el-icon-turn-off-microphone",

                },

                {

                    class: "el-icon-microphone",

                },

                {

                    class: "el-icon-close-notification",

                },

                {

                    class: "el-icon-bangzhu",

                },

                {

                    class: "el-icon-time",

                },

                {

                    class: "el-icon-odometer",

                },

                {

                    class: "el-icon-crop",

                },

                {

                    class: "el-icon-aim",

                },

                {

                    class: "el-icon-switch-button",

                },

                {

                    class: "el-icon-full-screen",

                },

                {

                    class: "el-icon-copy-document",

                },

                {

                    class: "el-icon-mic",

                },

                {

                    class: "el-icon-stopwatch",

                },

                {

                    class: "el-icon-medal-1",

                },

                {

                    class: "el-icon-medal",

                },

                {

                    class: "el-icon-trophy",

                },

                {

                    class: "el-icon-trophy-1",

                },

                {

                    class: "el-icon-first-aid-kit",

                },

                {

                    class: "el-icon-discover",

                },

                {

                    class: "el-icon-place",

                },

                {

                    class: "el-icon-location",

                },

                {

                    class: "el-icon-location-outline",

                },

                {

                    class: "el-icon-location-information",

                },

                {

                    class: "el-icon-add-location",

                },

                {

                    class: "el-icon-delete-location",

                },

                {

                    class: "el-icon-map-location",

                },

                {

                    class: "el-icon-alarm-clock",

                },

                {

                    class: "el-icon-timer",

                },

                {

                    class: "el-icon-watch-1",

                },

                {

                    class: "el-icon-watch",

                },

                {

                    class: "el-icon-lock",

                },

                {

                    class: "el-icon-unlock",

                },

                {

                    class: "el-icon-key",

                },

                {

                    class: "el-icon-service",

                },

                {

                    class: "el-icon-mobile-phone",

                },

                {

                    class: "el-icon-bicycle",

                },

                {

                    class: "el-icon-truck",

                },

                {

                    class: "el-icon-ship",

                },

                {

                    class: "el-icon-basketball",

                },

                {

                    class: "el-icon-football",

                },

                {

                    class: "el-icon-soccer",

                },

                {

                    class: "el-icon-baseball",

                },

                {

                    class: "el-icon-wind-power",

                },

                {

                    class: "el-icon-light-rain",

                },

                {

                    class: "el-icon-lightning",

                },

                {

                    class: "el-icon-heavy-rain",

                },

                {

                    class: "el-icon-sunrise",

                },

                {

                    class: "el-icon-sunrise-1",

                },

                {

                    class: "el-icon-sunset",

                },

                {

                    class: "el-icon-sunny",

                },

                {

                    class: "el-icon-cloudy",

                },

                {

                    class: "el-icon-partly-cloudy",

                },

                {

                    class: "el-icon-cloudy-and-sunny",

                },

                {

                    class: "el-icon-moon",

                },

                {

                    class: "el-icon-moon-night",

                },

                {

                    class: "el-icon-dish",

                },

                {

                    class: "el-icon-dish-1",

                },

                {

                    class: "el-icon-food",

                },

                {

                    class: "el-icon-chicken",

                },

                {

                    class: "el-icon-fork-spoon",

                },

                {

                    class: "el-icon-knife-fork",

                },

                {

                    class: "el-icon-burger",

                },

                {

                    class: "el-icon-tableware",

                },

                {

                    class: "el-icon-sugar",

                },

                {

                    class: "el-icon-dessert",

                },

                {

                    class: "el-icon-ice-cream",

                },

                {

                    class: "el-icon-hot-water",

                },

                {

                    class: "el-icon-water-cup",

                },

                {

                    class: "el-icon-coffee-cup",

                },

                {

                    class: "el-icon-cold-drink",

                },

                {

                    class: "el-icon-goblet",

                },

                {

                    class: "el-icon-goblet-full",

                },

                {

                    class: "el-icon-goblet-square",

                },

                {

                    class: "el-icon-goblet-square-full",

                },

                {

                    class: "el-icon-refrigerator",

                },

                {

                    class: "el-icon-grape",

                },

                {

                    class: "el-icon-watermelon",

                },

                {

                    class: "el-icon-cherry",

                },

                {

                    class: "el-icon-apple",

                },

                {

                    class: "el-icon-pear",

                },

                {

                    class: "el-icon-orange",

                },

                {

                    class: "el-icon-coffee",

                },

                {

                    class: "el-icon-ice-tea",

                },

                {

                    class: "el-icon-ice-drink",

                },

                {

                    class: "el-icon-milk-tea",

                },

                {

                    class: "el-icon-potato-strips",

                },

                {

                    class: "el-icon-lollipop",

                },

                {

                    class: "el-icon-ice-cream-square",

                },

                {

                    class: "el-icon-ice-cream-round",

                }
            ]
        },
        methods: {
            //切换菜单状态
            switchStatus(row) {
                row.status = row.status === 1 ? 0 : 1;
                axios.get("/right/updateStatus?id=" + row.id + "&status=" + row.status).then((res) => {
                    if (res.data.flag) {
                        this.$message.success('操作成功');
                        this.fetchData(this.page);
                    }
                })
            },
            //添加
            save() {
                this.sysMenus.rightTip = this.sysMenus.rightText;
                axios.post("/right/save", this.sysMenus).then((res) => {
                    if (res.data.flag) {
                        this.$message.success('操作成功')
                        this.dialogVisible = false
                        this.fetchData(this.page)
                    }
                })
            },
            //更新
            update() {
                this.sysMenus.rightTip = this.sysMenus.rightText;
                axios.put("/right/update", this.sysMenus).then((res) => {
                    if (res.data.flag) {
                        this.$message.success('操作成功')
                        this.dialogVisible = false
                        this.fetchData()
                    }
                })
            },
            //添加或更新
            saveOrUpdate() {
                this.$refs.dataForm.validate(valid => {
                    if (valid) {
                        this.saveBtnDisabled = true // 防止表单重复提交
                        console.log(this.sysMenus.id)
                        if (!this.sysMenus.id) {
                            this.save()
                        } else {
                            this.update()
                        }
                    }
                })
            },
            //弹出添加或更新的表单
            add(row) {
                this.typeDisabled = false
                this.dialogTitle = '添加下级节点'
                this.dialogVisible = true
                this.sysMenus = {};
                this.sysMenus.id = ''
                if (row) {
                    console.log(row);
                    this.sysMenus.status = row.status
                    this.sysMenus.parentName = row.rightText
                    if (row.rightType === "Folder") {
                        this.sysMenus.rightType = 'Document'
                        this.sysMenus.rightParentCode = row.rightCode
                        this.typeDisabled = true
                        this.type0Disabled = false
                        this.type1Disabled = false
                        this.type2Disabled = true
                    } else if (row.rightType === 'Document') {
                        // this.sysMenus.rightCode = row.rightCode       //权限表右侧id
                        this.sysMenus.rightParentCode = row.rightCode //权限表右侧父id
                        this.sysMenus.rightType = 'Url'
                        this.typeDisabled = true
                    }
                    console.log(this.sysMenus.rightType)
                } else {
                    this.dialogTitle = '添加目录节点'
                    this.sysMenus.rightType = 'Folder'
                    this.sysMenus.rightUrl = ''
                    this.sysMenus.rightParentCode = 'ROOT_MENU'
                    this.typeDisabled = true
                }
            },
            //根据id删除数据
            removeDataById(rightCode) {
                this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => { // promise
                    // 点击确定，远程调用ajax
                    return axios.delete("/right/remove?rightCode=" + rightCode)
                }).then((res) => {
                    if (res.data.flag) {
                        this.fetchData()
                        this.$message({
                            type: 'success',
                            message: "删除成功!!!"
                        })
                    }
                }).catch(() => {
                    this.$message.info('取消删除')
                })
            },
            //编辑
            edit(row) {
                this.dialogTitle = '修改菜单'
                this.dialogVisible = true
                this.sysMenus = row;
                this.typeDisabled = true
            },
            //调用api层获取数据库中的数据
            fetchData() {
                console.log('加载列表')
                axios.get("/right/findNodes").then((res) => {
                    this.sysMenuList = res.data.data
                    console.log(this.sysMenuList)
                })
            }
        },
        created: function () {//Vue生命周期方法，加载页面时会执行该方法
            layui.use(['laydate', 'element', 'laypage', 'layer'], function () {
                $ = layui.jquery;//jquery
                layer = layui.layer;//弹出层
                okLoading.close($);
                layer.ready(function () { //为了layer.ext.js加载完毕再执行
                    layer.photos({
                        photos: '#x-img'
                    });
                });
            });
            this.fetchData();
        }
    });

</script>


</body>
</html>
